<!DOCTYPE html>
<html >
	<head>
<meta charset="UTF-8">
<title>无标题文档</title>
</head>
<script type="text/javascript" src="js/jquery-1.12.4 (1).js" ></script>
<script>
 $(function(){
 		$("#all").click(function(){
			if($(this).val()=="全选"){
				$("input").prop("checked",true);
				$(this).val("全不选");
			}else{
				$("input").prop("checked",false);
				$(this).val("全选");
			}
		});
			$("h2 input").click(function(){
			$(this).parent().next().children().prop("checked",this.checked)
		});
		$("p input").each(function(){
				var i=0
				$(this).siblings().each(function(){
					if($(this).prop("checked",this.checked)){
						i++;
					}
				})
				if(i>0){
					$(this).parent().prev().children().prop("checked",this.checked);
				}
		});
	})
</script>
<body>
<div id="menu">
 <h2><input type="checkbox" name="role" value="101">系统管理</h2>
 <p>
 	<input type="checkbox" name="role" value="101001">用户管理
    <input type="checkbox" name="role" value="101002">参数管理
    <input type="checkbox" name="role" value="101003">权限管理
    <input type="checkbox" name="role" value="101004">日常管理
    <input type="checkbox" name="role" value="101005">财务管理
 </p>
 <hr>
 <h2><input type="checkbox" name="role" value="102">鲜花订单管理</h2>
 <p>
 	<input type="checkbox" name="role" value="102032">增加订单
    <input type="checkbox" name="role" value="102013">订单发货
    <input type="checkbox" name="role" value="102015">在线结算
    <input type="checkbox" name="role" value="102016">原料管理 
 </p>
 <hr>
 <h2><input type="checkbox" name="role" value="103">客户管理</h2>
 <p>
 	<input type="checkbox" name="role" value="103032">增加用户
    <input type="checkbox" name="role" value="103032">查找用户
    <input type="checkbox" name="role" value="103012">用户维护
    <input type="checkbox" name="role" value="103012">生日祝贺
    <input type="checkbox" name="role" value="103012">删除用户
 </p>
</div>
 <p>
  <input type="button" value="全选" id="all">
  <input type="submit" value="提交">
  <input type="reset" value="重置">
 </p>
 <hr>
 <p>
   1:实现  全选 全不选 功能（通过点击 全选 按钮）<br>
   2：选中h2中的大项，对应后面的小项 全部选中；取消选中，则小项全部取消；<br>
   3:选中小项，则其对应的大项选中，如果小项都未选中，则大项不选。<br>
   4：不能采用固定value 的方式，比如$(":checkbox[value=1001]")这样的格式
 </p>


</body></html>
